<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" href="component/pear/css/pear.css"/>
    <link rel="stylesheet" href="admin/css/other/login.css"/>
</head>
<!-- 代 码 结 构 -->
<body background="admin/images/background.svg" style="background-size: cover;">
<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <img class="logo" src="admin/images/logo.png"/>
        <div class="title">Geometa</div>
        <div class="desc">
            标 准 化 的 遥 感 元 数 据 管 理 平 台
        </div>
    </div>
    <div class="layui-form-item">
        <input placeholder="账 户" name="username" id="username" lay-verify="required" hover class="layui-input"/>
    </div>
    <div class="layui-form-item">
        <input placeholder="密 码" name="password" id="password" lay-verify="required" hover class="layui-input" type="password"/>
    </div>
    <div class="layui-form-item">
        <input placeholder="验证码" name="captcha" hover lay-verify="required"
               class="code layui-input layui-input-inline" id="captchaInput"/>
        <img src="admin/images/captcha.gif" class="codeImage" id=captchaImg captcha-id="" title="验证码"/>
    </div>
    <div class="layui-form-item">
        <input type="checkbox" name="" title="记住密码" lay-skin="primary" id="rememberMe" checked>
    </div>
    <div class="layui-form-item">
        <button type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
            登 入
        </button>
    </div>
</form>
<!-- 资 源 引 入 -->
<script src="component/layui/layui.js"></script>
<script src="component/pear/pear.js"></script>
<script src="js/js-cookie.js"></script>
<script>
    const loginUrl = "../auth/authentication/login";
    const captchaGetUrl = "../auth/captcha/get";
    const captchaVerifyUrl = "../auth/captcha/verify";
    const succeedCode = 0;
    $ = layui.jquery;
    layui.use(['form', 'button', 'popup'], function () {

        const form = layui.form;
        const button = layui.button;
        const popup = layui.popup;

        // 登 录 提 交
        form.on('submit(login)', function (data) {
            console.log("on submit");
            console.log(data)

            // 验证
            let captchaId = $('#captchaImg').attr('data-id');
            let captchaValue = $('#captchaInput').val();

            $.post(captchaVerifyUrl, {id: captchaId, value: captchaValue}, function (data, status) {
                // 成功回调函数
                console.log(data);
                if (data.code === succeedCode) {
                    // 验证码正确
                    login();
                } else {
                    alert(data.message);
                }
            }, 'json').fail(function () {
                // 失败回调函数
                alert('请求失败');
            });

            // 发送登录请求
            function login() {
                $.ajax({
                    type: "POST",
                    url: loginUrl,
                    data: data.field,
                    success: function (response) {
                        console.log(response);
                        if (response.code === succeedCode) {
                            // 设置 cookies，有效期五天
                            Cookies.set("token", response.data, { expires: 5 });
                            // 要求记住密码
                            if ($('#rememberMe').prop('checked')) {
                                console.log("记住密码");
                                let username = $('#username').val();
                                let password = $('#password').val();
                                // 如果勾选了，则设置cookie，有效期为5天
                                Cookies.set("remember-me","true", {expires: 5 });
                                Cookies.set("username", username, { expires: 5 });
                                Cookies.set("password", password, { expires: 5 });
                            } else {
                                console.log("不记住密码")
                                Cookies.remove("remember-me");
                                Cookies.remove("username");
                                Cookies.remove("password");
                            }
                            // 跳转到首页
                            /// 动画
                            button.load({
                                elem: '.login',
                                time: 1500,
                                done: function () {
                                    popup.success("登录成功", function () {
                                        location.href = "index.html"
                                    });
                                }
                            })
                        } else {
                            alert(response.message);
                        }

                    },
                    error: function (xhr, status, error) {
                        // 登录失败，显示错误消息
                        alert("登录失败：" + xhr.responseText);
                    }
                });
            }

            return false;
        });
    })

    // 验证码刷新
    // 绑定图片点击事件
    let captchaImg = $('#captchaImg')
    captchaImg.click(function (event) {
        event.preventDefault();
        console.log("in click")
        refreshCaptcha();
    });

    function refreshCaptcha() {
        $.get(captchaGetUrl, function (data, status) {
            console.log(data);
            console.log(this.url)
            // 成功回调函数
            if (data.code === succeedCode) {
                console.log("刷新验证码")
                captchaImg.attr('src', 'data:image/png;base64,' + data.data.image);
                captchaImg.attr('data-id', data.data.id);
                $('#captchaInput').val('');
            } else {
                alert(data.message);
            }

        }).fail(function () {
            // 失败回调函数
            console.log('请求失败');
        });
    }

    function loadRememberMe() {
        // 判断是否存在“记住密码”的cookie
        if (Cookies.get("remember-me")) {
            // 如果存在则自动填充用户名和密码，并勾选“记住密码”复选框
            let username = Cookies.get("username");
            let password = Cookies.get("password");
            $("#username").val(username);
            $("#password").val(password);
            $("#rememberMe").prop("checked", true);
        }
    }

    // 初次加载刷新验证码
    refreshCaptcha();
    // 加载密码
    loadRememberMe();

</script>
</body>
</html>
